<template>
    <view class="coupon-list-item">
        <view class="coupon-item" :class="{ disabled: state != 0 }">
            <view class="coupon-item-type">
                <view class="type-box" v-if="item.V_PrivilegeWay == 0">
                    <text class="price">{{ (item.CouponPrivilegeValue / 10).toFixed(1) }}</text>
                    <text class="unit">折</text>
                </view>
                <view class="type-box" v-if="item.V_PrivilegeWay != 0">
                    <text class="unit">￥</text>
                    <text class="price">{{ item.CouponPrivilegeValue }}</text>
                </view>
                <text>满 {{ item.V_OrderPrice }} 元可用</text>
            </view>
            <view class="coupon-item-info">
                <text class="coupon-name">{{ item.V_Name }}</text>
                <text class="coupon-desc">全场通用</text>
                <text class="coupon-time"
                    >{{ item.V_GetStartTime.split(" ")[0] }} 至 {{ item.V_GetEndTime.split(" ")[0] }}</text
                >
            </view>
            <view class="radio-box" v-if="showSelect" @click="selectFn">
                <radio :checked="String(item.ID) == selectId" :value="String(item.ID)"></radio>
            </view>
        </view>

        <view class="info-content" :class="{ disabled: state != 0 }">
            <view class="info-header">
                <view class="btn-box">
                    <text class="btn-showMore" @click="showMore = !showMore">使用说明</text>
                    <view :class="showMore ? 'icon-up' : 'icon-down'"></view>
                </view>

                <button class="btn btn-main" v-if="state == 0 && !showSelect" @click="easyGoProduct">去使用</button>
            </view>
            <view class="info-main" v-if="showMore">
                <text>{{ item.V_Remark ? item.V_Remark : "无" }}</text>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        state: {
            type: Number,
            default: 0,
        },
        showSelect: {
            type: Boolean,
            default: false,
        },
        selectId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            showMore: false,
        }
    },
    mounted() {},
    methods: {
        goDetail() {
            this.easyGoTo("/pages_shop/packet/coupon/detail?data=" + encodeURIComponent(JSON.stringify(this.item)))
        },
        getTypeText() {
            let text = ""
            switch (this.item.V_PrivilegeWay) {
                case 0:
                    text = "折扣券"
                    break
                case 1:
                    text = "抵用券"
                    break
                case 2:
                    text = "随机抵用券"
                    break
                case 3:
                    text = "动态抵用券"
                    break
                default:
                    text = "优惠券"
                    break
            }
            return text
        },
        selectFn() {
            this.$emit("selectFn", String(this.item.ID))
        },
    },
}
</script>

<style lang="scss">
.coupon-list-item {
    display: flex;
    flex-direction: column;
    background: $color-white;
    border-radius: 16rpx;
    margin: $app-page-padding;
}

.coupon-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;

    .coupon-item-type {
        width: 200rpx;
        margin-right: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text {
            color: $app-color-main;
        }
        .type-box {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .unit {
                margin-bottom: 10rpx;
                font-size: 32rpx;
                font-weight: 700;
            }
            .price {
                font-size: 64rpx;
                font-weight: 700;
            }
        }
        .type-name {
            font-size: 40rpx;
        }
    }

    .coupon-item-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 320rpx);
        .coupon-name {
            font-size: $font-size-28;
            font-weight: 700;
            margin-bottom: 12rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .coupon-desc {
            font-size: $font-size-24;
            margin-bottom: 12rpx;
        }
        .coupon-time {
            color: $app-color-text-tip;
            font-size: $font-size-22;
        }
    }
    .radio-box {
        width: 100rpx;
        display: flex;
        justify-content: flex-end;
    }
}

.info-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    border-top: 1rpx dashed #f1f1f1;
    padding: 14rpx $app-page-padding;
    position: relative;
    text-align: left;

    &:before {
        left: -16rpx;
    }

    &:before,
    &:after {
        content: "";
        position: absolute;
        width: 32rpx;
        height: 32rpx;
        border-radius: 100%;
        background: #f8f8f8;
        top: -16rpx;
        right: -16rpx;
    }
    .info-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .btn-box {
            display: flex;
            flex-direction: row;
            flex: 1;
            align-items: center;
            .icon-down {
                margin-top: 4rpx;
            }
        }
        .btn {
            border-radius: 100rpx;
            height: 48rpx;
        }
    }
    .btn-showMore {
        color: $app-color-text-tip;
        margin-right: 8rpx;
    }
}
.disabled {
    opacity: 0.6;
}
</style>
